<?php
require_once dirname(__FILE__) . '/../../../incls/php/dbutils.class.php';
require_once dirname(__FILE__) . '/../../../incls/php/miscutils.class.php';
$myPdo = DbUtils::createPdoInst();
$inst_id = MiscUtils::getParam('inid', 0);
$cond_vals = new stdClass();
$cond_vals->c = 't.instance_id = :v1';
$cond_vals->v = array(':v1' => $inst_id);
$items = DbUtils::get($myPdo, TABLE_NAME_PREFIX_PLUGIN . basename(dirname(__FILE__)) . '_item', $cond_vals, 't.order_number', 'ASC', NULL, NULL, NULL)->d;
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
        <style>
            *{
                margin:0;
                padding:0;
            }
            .reference{
                clear:both;
                width:750px;
                margin:30px auto;
            }
            .reference p a{
                text-transform:uppercase;
                text-shadow:1px 1px 1px #fff;
                color:#666;
                text-decoration:none;
                font-size:10px;
            }
            .reference p a:hover{
                color:#333;
            }
        </style>
    </head>
    <body>
      
            <div class="rotator">
                <ul id="rotmenu">
                  <?php foreach ($items as $idx => &$item) { ?>
                    <li>
                        <a href="rot<?php echo $idx + 1; ?>"><?php echo $item->title; ?></a>
                        <div style="display:none;">
                            <div class="info_image"><?php echo $item->path; ?></div>
                            <div class="info_heading"><?php echo $item->title; ?></div>
                            <div class="info_description"><?php echo $item->description; ?></div>
                        </div>
                    </li>
                  <?php } ?>
                </ul>
                <div id="rot1">
                    <img src="" width="750" height="400" class="bg" alt=""/>
                    <div class="heading">
                        <h1></h1>
                    </div>
                    <div class="description">
                        <p></p>

                    </div>    
                </div>
            </div>
        <!-- The JavaScript -->
        <script type="text/javascript" src="../../../libs/jquery/jquery-1.6.2.min.js"></script>
        <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
        <script type="text/javascript">
            $(function() {
                var current = 1;
                
                var iterate		= function(){
                    var i = parseInt(current+1);
                    var lis = $('#rotmenu').children('li').size();
                    if(i>lis) i = 1;
                    display($('#rotmenu li:nth-child('+i+')'));
                }
                display($('#rotmenu li:first'));
                var slidetime = setInterval(iterate,30000);
				
                $('#rotmenu li').bind('click',function(e){
                    clearTimeout(slidetime);
                    display($(this));
                    e.preventDefault();
                });
				
                function display(elem){
                    var $this 	= elem;
                    var repeat 	= false;
                    if(current == parseInt($this.index() + 1))
                        repeat = true;
					
                    if(!repeat)
                        $this.parent().find('li:nth-child('+current+') a').stop(true,true).animate({'marginRight':'-20px'},400,function(){
                            $(this).animate({'opacity':'0.7'},700);
                        });
					
                    current = parseInt($this.index() + 1);
					
                    var elem = $('a',$this);
                    
                        elem.stop(true,true).animate({'marginRight':'0px','opacity':'1.0'},400);
					
                    var info_elem = elem.next();
                    $('#rot1 .heading').animate({'left':'-420px'}, 500,'easeOutCirc',function(){
                        $('h1',$(this)).html(info_elem.find('.info_heading').html());
                        $(this).animate({'left':'0px'},400,'easeInOutQuad');
                    });
					
                    $('#rot1 .description').animate({'bottom':'-270px'},500,'easeOutCirc',function(){
                        $('p',$(this)).html(info_elem.find('.info_description').html());
                        $(this).animate({'bottom':'0px'},400,'easeInOutQuad');
                    })
                    $('#rot1').prepend(
                    $('<img/>',{
                        style	:	'opacity:0',
                        className : 'bg'
                    }).load(
                    function(){
                        $(this).animate({'opacity':'1'},600);
                        $('#rot1 img:first').next().animate({'opacity':'0'},700,function(){
                            $(this).remove();
                        });
                    }
                ).attr('src',info_elem.find('.info_image').html()).attr('width','750').attr('height','400')
                );
                }
            });
        </script>
    </body>
</html>